<template>
  <div>
    <transition name="fade" >
      <div class="area-mask" v-if="getArea.modal" @click="close()"></div>
    </transition>
    <transition name="fade">
      <div class="area" v-if="getArea.modal">
        <div class="tit">
          所在地区
        </div>
        <ul class="area-choose">
          <li :class="{'active':index===1}" @click="index=1">
            <span v-if="getArea.aShen.text">{{getArea.aShen.text}}</span>
            <span v-if="!getArea.aShen.text">请选择</span>
          </li>
          <li v-show="!!aShiList.length" :class="{'active':index===2}" @click="index=2">
            <span v-if="getArea.aShi.text">{{getArea.aShi.text}}</span>
            <span v-if="!getArea.aShi.text">请选择</span>
          </li>
          <li v-show="!!aXianList.length" :class="{'active':index===3}" @click="index=3">
            <span v-if="getArea.aXian.text">{{getArea.aXian.text}}</span>
            <span v-if="!getArea.aXian.text">请选择</span>
          </li>
        </ul>
        <div class="area-list shen-list" v-show="index===1">
          <ul>
            <li v-for="item in aShenList" :key="item.provinceID"
                :class="{'select': item.provinceID== getArea.aShen.id}"
                @click="chooseShi(item.provinceID,item.provinceName)"
            >{{item.provinceName}}
            </li>
          </ul>
        </div>
        <div class="area-list shi-list" v-show="index===2">
          <ul>
            <li v-for="item in aShiList"
                :class="{'select': item.cityID==getArea.aShi.id}"
                @click="chooseXian(item.cityID,item.cityName)"
            >{{item.cityName}}
            </li>
          </ul>
        </div>
        <div class="area-list xian-list" v-show="index===3">
          <ul>
            <li v-for="item in aXianList"
                :class="{'select': item.areaID==getArea.aXian.id}"
                @click="chooseAddress(item.areaID,item.areaName)"
            >{{item.areaName}}
            </li>
          </ul>
        </div>
        <div class="area-list" v-show="isLoading">
          <div class="ball-clip-rotate">
            <div></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import api from '@api'

  const setArea = function (store, {type, id, text}) {
    store.dispatch('backend/tempOrder/setArea', {type, id, text})
  }
  export default {
    data() {
      return {
        aShenList: [],
        aShiList: [],
        aXianList: [],
        index: 1,
        isLoading: false
      }
    },
    props: {
      shen: String,
      shi: String,
      xian: String,
      edit: Boolean
    },
    computed: {
      ...mapGetters({
        getArea: 'backend/tempOrder/getArea'
      })
    },
    async mounted(){
      let _this = this;
      setArea(this.$store, {
        type: 'aShen',
        id: '',
        text: ''
      })
      setArea(this.$store, {
        type: 'aShi',
        id: '',
        text: ''
      })
      setArea(this.$store, {
        type: 'aXian',
        id: '',
        text: ''
      })
      this.isLoading = true;
      if (this.edit) {
        let {data: {StatusCode, provinceList, cityList, areaList}} = await api.get('api/v1/Area/arerDetail.ashx', {
          provinceId: this.shen,
          cityId: this.shi
        })
        if(StatusCode == '200') {
          this.aShenList = provinceList;
          this.aShiList = cityList;
          this.aXianList = areaList;

          let shenObj = provinceList.filter(function (item) {
            return _this.shen == item.provinceID.toString()
          })
          setArea(this.$store, {
            type: 'aShen',
            id: this.shen,
            text: shenObj[0].provinceName
          });
          let shiObj = cityList.filter(function (item) {
            return _this.shi == item.cityID.toString()
          })
          this.aShiText = shiObj[0].cityName
          setArea(this.$store, {
            type: 'aShi',
            id: this.shi,
            text: shiObj[0].cityName
          });
          let xianObj = areaList.filter(function (item) {
            return _this.xian == item.areaID.toString()
          })
          setArea(this.$store, {
            type: 'aXian',
            id: this.xian,
            text: xianObj[0].areaName
          });
        }

      } else {
        let {data:{StatusCode, provinceList}} = await api.get('api/v1/Area/provinceList.ashx')
        this.aShenList = StatusCode == '200' ? provinceList : []
      }
      this.isLoading = false
    },
    methods: {
      async chooseShi(shenID, shenName) {
        this.isLoading = true;
        setArea(this.$store, {
          type: 'aShen',
          id: shenID,
          text: shenName
        });
        setArea(this.$store, {
          type: 'aShi',
          id: '',
          text: ''
        });
        setArea(this.$store, {
          type: 'aXian',
          id: '',
          text: ''
        })
        this.index = 2
        let {data:{StatusCode, cityList}} = await api.get('api/v1/Area/cityList.ashx', {provinceId: shenID});
        if (StatusCode === '200') {
          this.aShiList = cityList
        }
        this.isLoading = false;
      },
      async chooseXian(shiID, shiName) {
        this.isLoading = true;
        this.index = 3;
        setArea(this.$store, {
          type: 'aShi',
          id: shiID,
          text: shiName
        });
        setArea(this.$store, {
          type: 'aXian',
          id: '',
          text: ''
        });
        let {data: {StatusCode, areaList}} = await api.get('api/v1/Area/areaList.ashx', {cityId: shiID})
        if (StatusCode == '200') {
          this.aXianList = areaList
        }
        this.isLoading = false;
      },
      async chooseAddress(xianID, xianName) {
        setArea(this.$store, {
          type: 'aXian',
          id: xianID,
          text: xianName
        });
        this.close();
      },
      close () {
        this.$store.dispatch('backend/tempOrder/showModal', false)
      }
    }
  }
</script>